<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">
<title>whit-大数据博客 | 搜索首页</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/toastr/toastr.min.css">


<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath}/css/blog.css"
	rel="stylesheet">

<style type="text/css">
.blog-post img {
	max-width: 600px;
}
</style>


</head>
<body>
	<%@ include file="/view/main/header.jsp"%>

	<div class="container">
		<div class="row">
			<div class="col-sm-8 blog-main">
				<h3 class="blog-title">搜索结果</h3>
				<p class="lead blog-description">The official example template
					of creating a blog with Bootstrap.</p>

				<c:forEach items="${page.list}" var="p" varStatus="status">
					<div class="blog-post" >
						<h4 class="blog-post-title" style="font-size: 20px!important;">
						<a target="blank" href="${pageContext.request.contextPath}/TblogServlet?method=show&id=${p.id}">${ p.title }</a></h4>
						<p class="blog-post-meta">来源：${ p.author }  
						</p>

						<p>${ p.content }</p>  
						 
					</div>
					<div style="display: none"></div>
					<hr>

					<!-- /.blog-post -->
				</c:forEach>
				<!-- 分页 -->
				

			</div>
			<!-- /.blog-main -->

			<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
				<div class="sidebar-module" style="text-align: center;">
					<img style="width: 60px;"
						class="img-responsive img-circle img-thumbnail" alt=""
						src="${pageContext.request.contextPath}/images/tiger.jpg">
					<ul class="list-unstyled list-inline" style="margin: 2px;">
						<li>${loginUser}</li>
					</ul>
					<ul class="list-unstyled list-inline">
						<li><strong>文章数 (12)</strong></li>
						<li><strong>点赞数 (12)</strong></li>
						<li><strong>收藏数 (12)</strong></li>
						<li><strong>评论数 (12)</strong></li>
					</ul>
				</div>
				<div class="sidebar-module" style="text-align: center;">
					<button class="btn btn-primary btn-lg"
						onclick="javascript:self.location='${pageContext.request.contextPath}/TblogServlet?method=newBlog'">写博客</button>
				</div>
				<div class="sidebar-module sidebar-module-inset">
					<h4>About</h4>
					<p>
						Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras
						mattis consectetur purus sit amet fermentum. Aenean lacinia
						bibendum nulla sed consectetur.
					</p>
				</div>
				 
			</div>
			<!-- /.blog-sidebar -->

		</div>
		<!-- /.row -->

	</div>
	<!-- /.container -->

	<%@ include file="/view/main/foot.jsp"%>

	<div id="myModal" class="modal modal-primary" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="voteTitle">标题</h4>
				</div>
				<div class="modal-body">
					<div class="box-body" >
						<div class="form-horizontal" id="optionsDiv">
							<div class="form-group">
								<label class="col-sm-2 control-label">选框:</label>
								<div class="col-sm-5">
									<div class="radio">
										<label>
											<input type="radio" name="voteOption"><span>选框1</span>
										</label> 
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
					<button type="button" onclick="voteStart()" class="btn btn-outline" data-dismiss="modal">投票</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
	<div id="myModal2" class="modal modal-primary" role="dialog">
		<div class="modal-dialog modal-lg" style="top: 5%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="voteTitle2">标题2</h4>
				</div>
				<div class="modal-body">
					<div class="box-body" style="background-color: white;" >
						<div class="form-horizontal" id="resultDiv" style="width: 100%;height:400px;">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
</body>

<script
	src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
	src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>

<script
	src="${pageContext.request.contextPath}/plugins/toastr/toastr.min.js"></script>
	
	<script src="${pageContext.request.contextPath}/plugins/echarts/echarts.min.js"></script>


<script type="text/javascript">

	//显示结果
	function showNow(event,voteid){
		//查询是否投票，没有投票，不能查看结果 todo
		//获取投票的结果
		$.ajax({
            type : "GET",
            contentType: "application/json;charset=UTF-8",
            url : "VoteServlet?method=getById&id=" + voteid,
            success : function(result) {
	            var item = $.parseJSON(result);
	            var optionsArray  = $.parseJSON(item.options);
	            showChart(optionsArray,item.title);
            },
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
		});
		
	}
	

	function showChart(optionsArray,itemTitle){
		var dom = document.getElementById("resultDiv");
		var myChart = echarts.init(dom);

		$("#voteTitle2").text(itemTitle);

		var titleArray = [];
		var dataArray = [];
		$.each(optionsArray,function(index,item){
			titleArray.push(item.name);
			var it = {
					name:item.name,
					value:item.num
			}
			dataArray.push(it);
		})
		
		var app = {};
		option = null;
		option = {
		    title: {
		        text: itemTitle,
		        subtext: '',
		        left: 'center'
		    },
		    tooltip: {
		        trigger: 'item',
		        formatter: '{a} <br/>{b} : {c} ({d}%)'
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: titleArray
		    },
		    series: [
		        {
		            name: '',
		            type: 'pie',
		            radius: '55%',
		            center: ['50%', '60%'],
		            data: dataArray,
		            emphasis: {
		                itemStyle: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		 
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}


	} 

</script>


<script type="text/javascript">
	window.scrollTo(0,0); 

	toastr.options.positionClass = 'toast-bottom-center';
	var voteId ;
	//提交投票数据
	function voteStart(){
		//是否已经选择了选项
		var optionsDiv = $("#optionsDiv");
		var val = optionsDiv.find("input[name='voteOption']:checked").val();
		if(val == undefined){
			alert("请选择选项");
			return;
		}
		if(confirm("是否确定选择？" + optionsDiv.find("input[name='voteOption']:checked").next().text())){
			//提交投票数据，投票id，选项id，后台需要验证用户身份，检查是否已经投票，记录投票数据
			$.ajax({
	            type : "GET",
	            contentType: "application/json;charset=UTF-8",
	            url : "VoteItemServlet?method=add&voteid=" + voteId + "&optionid=" + val,
	            success : function(result) {
		            alert(result);
	            },
	            error : function(e){
	                console.log(e.status);
	                console.log(e.responseText);
	            }
			});
				
			//后台登录的时候，需要检查该用户是否已经登录，清空session，处理单点登录问题，已处理
			
		}
	}

	//打开投票窗口
	function voteNow(event,voteid){
		//检查是否已经投票 todo
		voteId = voteid;
		
		//参与投票
		$.ajax({
            type : "GET",
            contentType: "application/json;charset=UTF-8",
            url : "VoteServlet?method=getById&id=" + voteid,
            //data : JSON.stringify(list),
            success : function(result) {
	            //var item = JSON.parse(result);
	            var item = $.parseJSON(result);
				//投票主题
	            $("#myModal").find("h4").eq(0).html(item.title);
				//投票的各个选项值
                var optionsObject = $.parseJSON(item.options)

				var optionsDiv = $("#optionsDiv");
                var option = optionsDiv.children(":first-child").clone();
                optionsDiv.html("");
                $.each(optionsObject,function(index,item){
                    var newOption = option.clone();
                    newOption.find("label").eq(0).html( item.id + ".");
                    newOption.find("input").eq(0).val(item.id);
                    newOption.find("input").eq(0).next().text(item.name);
                	optionsDiv.append(newOption);
                });
            },
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
		});

		
		
	}
	   
</script>



</html>